import {useMemo} from "react";
import {Pagination} from "antd";
import {TablePage} from "@/common/httptypes";

export type HTablePaginationProps<RecordType> = {
    pagination?: boolean;
    tablePageData?: TablePage<RecordType>
    pageSizeOptions?: number[];
    page?: number;
    size?: number;
    onChange?: (page: number, size: number) => void;
}


export default function HTablePagination<RecordType>(props: HTablePaginationProps<RecordType>) {
    const {pagination = true, pageSizeOptions = [10, 20, 30, 40, 50], tablePageData, onChange, page, size} = props;
    const pages = useMemo(() => {
        if (pagination) {
            const {total, records} = tablePageData as TablePage<RecordType>;
            const maxPage = Math.ceil(total! / size!)
            return <>
                <Pagination style={{textAlign: "left", margin: "1px"}} defaultCurrent={1} current={page}
                            total={total}
                            showSizeChanger={true}
                            showQuickJumper={true}
                            showTitle={true}
                            defaultPageSize={pageSizeOptions[0]}
                            pageSizeOptions={pageSizeOptions}
                            onChange={onChange}/>

                {`当前第 ${page}/${maxPage} 页，当前页 ${records ? records.length : 0}/${size} 行.总共匹配 ${total ? total : 0} 行`}
            </>
        } else {
            return <></>
        }
    }, [pagination, tablePageData, page, size, onChange, pageSizeOptions])

    return <>
        {
            pages
        }
    </>
}
